<template>
  <div>
    <el-button type="success" size="mini" @click="handleAdd">添加标签</el-button>
    <el-table
      :data="types"
      style="width: 100%">
      <el-table-column
        label="标签"
        width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data() {
      return {
        types:[]
      }
    },
    created(){
      this.getTypes() //获取标签信息
    },
    methods: {
      //获取全部标签信息
      async getTypes(){
        const {data:res} = await this.$http.get('/blog/type/list')
        this.types = res.data
      },
      //添加标签
      handleAdd(){ 
        this.$prompt('请输入标签', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder:'请输入新的标签名'
        }).then(async ({ value }) => {
           //向后端发送请求添加标签
           const {data:res} = await this.$http.post('/blog/type/save',qs.stringify({
               name:value
           }))
           //输出提示信息
            this.$message({
                type: res.meta.status == 200 ? 'success' : 'error',
                message: res.meta.msg
            });
           if(res.meta.status !== 200){
               return;
           }
           //重新获取数据
           this.types = this.getTypes()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });       
        });
      },
      //编辑标签
      handleEdit(index, row) {
        let oldTag = row.name
        this.$prompt('请输入标签', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: oldTag
        }).then(async ({ value }) => {
          if(value.trim() == oldTag){
            this.$message({
              type: 'error',
              message: '标签名未修改'
            });
            return
          }
          //根据row.id向服务器发送删除请求
           const {data:res} = await this.$http.post('/blog/type/update',
            {
              "id":row.id,
              "name":value 
            }     
           ) 
          // const {data:res} = await this.$http({
          //   method:'post',
          //   url:'/blog/type/update',
          //      dataType: 'json',
          //      contentType:'application/json',
          //   data:data
          // })
           //输出提示信息
            this.$message({
                type: res.meta.status == 200 ? 'success' : 'error',
                message: res.meta.msg
            });
           if(res.meta.status !== 200){
               return;
           }
           this.getTypes() 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });       
        });
      },
      //删除标签
      handleDelete(index, row) {
        this.$confirm('是否确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //根据row.id向服务器发送删除请求
           const {data:res} = await this.$http.post('/blog/type/delete',qs.stringify({
               id:row.id
           }))
           //输出提示信息
            this.$message({
                type: res.meta.status == 200 ? 'success' : 'error',
                message: res.meta.msg
            });
           if(res.meta.status !== 200){
               return;
           }
           this.getTypes() 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

<style scoped>
  .el-table{
    margin-top:20px;
  }
</style>